<template>
    <el-dialog
        title="批量设置"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="700px"
        top="30px"
        :close='clearData'
        :before-close="clearData"
    >
        <div>
            <el-form
                ref="form"
                size="mini"
                inline
                :model="form"
                label-width="100px"
            >
                <el-form-item label="用户账户:" prop="userName">
                    <el-input
                        type="text"
                        v-model="form.userName"
                        class="item"
                        @change="filterList"
                    ></el-input>
                </el-form-item>
                <el-form-item label="用户状态:" prop="status">
                    <el-select
                        v-model="form.status"
                        class="item"
                        placeholder="请选择"
                        @change="form.userName='';$refs.articleTable.clearSelection();getList()"
                    >
                        <el-option label="启用" :value="0"></el-option>
                        <el-option label="停用" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-button
                    type="primary"
                    size="mini"
                    @click="getList"
                    class="el-button-1"
                    >查询</el-button
                >
            </el-form>
            <el-table
                v-loading='loading'
                :header-cell-style="headerCellStyle"
                :data="tableData"
                border
                ref="articleTable"
                size="small"
                @selection-change="handleSelectionChange"
                row-key="id"
                max-height="350px"
            >
                <el-table-column type="selection" :reserve-selection='true'></el-table-column>
                <el-table-column
                    prop="userName"
                    label="用户账户"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    prop="status"
                    label="用户状态"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <div v-show="~~scope.row.status === 0">启用</div>
                        <div v-show="~~scope.row.status === 1">停用</div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer">
            <el-button type="danger" :disabled='form.status===1' plain size="small" @click="save(1)"
                >批量停用</el-button
            >
            <el-button type="primary" :disabled='form.status===0' size="small" @click="save(0)"
                >批量启用</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        roleId: Number
    },
    data () {
        return {
            copyData: [],
            loading: false,
            tableData: [],
            checkArr: [],
            showValue: false,
            form: {
                userName: '',
                status: 0
            }
        }
    },
    watch: {
        value (val) {
            console.log(val)
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                this.getList()
            } else {
                this.$emit('getList')
                this.clearData()
            }
            this.$emit('update:value', val)
        }
    },
    methods: {
        filterList (val) {
           this.tableData = this.copyData.filter(item => item.userName.includes(val))
        },
        handleSelectionChange (arr) {
            this.checkArr = arr
        },
        // 获取列表
        getList () {
            this.loading = true
            this.$http.post(this.$store.state.IP + '/systemUserManage/getStatusUserList',
                {
                    ...this.form,
                    roleId: this.roleId
                },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                this.loading = false
                console.log(response)
                response = response.body
                if (response.ret === '0') {
                    this.tableData = response.res
                    this.copyData = response.res
                }
            }, response => {
                this.loading = false
                console.log('通讯失败')
            })
        },
        // 清空数据
        clearData () {
            this.$refs['form'].resetFields()
            this.checkArr = []
            this.showValue = false
        },
        // 保存表单
        save (status) {
            console.log(this.checkArr)
            if (this.checkArr.length === 0) {
                this.$message({
                    message: '请先勾选账户',
                    type: 'warning'
                })
                return
            }
            let listID = []
            listID = this.checkArr.map(item => item.id)
            this.loading = true
            this.$http.post(this.$store.state.IP + '/systemUserManage/batchEditUserStatus', {
                listID: listID,
                status: status
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                this.loading = false
                response = response.body
                if (response.ret === '0') {
                    this.$message({
                        showClose: true,
                        message: '保存成功',
                        type: 'success'
                    })
                    this.getList()
                    this.$emit('getList')
                    this.$refs.articleTable.clearSelection()
                    // this.clearData()
                }
                if (response.ret !== '0') {
                    console.log('保存失败')
                }
            }, response => {
                console.log('调用保存失败')
            })
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item
    width: 110px
</style>